<template>
	<div class="">
		<!--<base-header :pName="pName"></base-header>-->
		<!--list-->
		<loading v-if="isloading"></loading>
		<ul class="list-ul">
			<li class="list-li" v-for="question in question_list">
				<header class="list-header">
					<div class="list-user">
						<img class="list-user-head" :src="url+(question.avatar_path)+(question.avatar)" /> 
						{{question.name}}
					</div>
					<div class="list-time">
						{{question.created_at}}
					</div>
				</header>
				<div @click="jumpQuestionDetails(question.id)" class="">
					<h4 class="list-title">{{question.title}}</h4>
					<div class="list-main" v-html="question.content">
						
					</div>
				</div>
				<footer class="list-footer">
					<div class="list-see">
					</div>
					<div class="list-comment">
						<img src="../../assets/icon/comment.png" />
						<span>{{question.answer_count}}位医生回答问题</span>
					</div>
				</footer>
			</li>
			<no-msg v-if="noMsg"></no-msg>
		</ul>
		<!--put_questin-->
		<div class="put_question">
			<span @click="jumpPutQuestion">我要提问</span>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	import NoMsg from "@/components/common/NoMsg"
	import Loading from "@/components/common/Loading"
	import { formatDate } from '@/util/date'
	export default {
		name: 'QuestionList',
		components: {
			BaseHeader,
			NoMsg,
			Loading
		},
		filters: {
			//时间格式过滤器
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'MM-dd  hh:mm')
			}
		},
		data() {
			return {
				pName: '',
				content: '',
				url: '',
				question_list: [],
				t: [],
				page: '1',
				noMsg: false,
				isloading: true
			}
		},
		mounted() {
			this.pName = this.$route.query.pName;
			localStorage.setItem('pname',this.$route.query.pName);
			var self = this;
			//为窗口的scroll事件绑定处理函数 
			$(window).scroll(function() {
				if($(document).scrollTop() >= $(document).height() - $(window).height()) {
					//alert("滚动条已经到达底部为" + $(document).scrollTop());
					self.page++;
					if(self.page < self.page_count) {
						self.getList();
					} else {
						return 'noMore';
					}
				}
			});
			this.getList();
		},
		methods: {
			//获取问题列表
			getList() {
				var self = this;
				var data = {
					page: self.page,
				};
				$.post(global.domain + global.API.sns_question_index, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.t = msg.data;
						for(var i = 0; i < self.t.length; i++) {
							self.question_list.push(self.t[i]);
						};
						self.page_count = msg.page_count;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
						if(msg.data.length > 0) {
							self.noMsg = false;
						} else {
							self.noMsg = true;
						}
					} else {
						console.log(msg.error);
					}
				}, 'json');
			},
			//跳到发布问题
			jumpPutQuestion() {
				this.$router.push({
					path: '/put_question'
				});
			},
			//跳到问题详情
			jumpQuestionDetails(qid) {
				this.$router.push({
					name: 'QuestionDetail',
					params: {
						qid
					}
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/list.css";
	.list-li {
		border-bottom: none;
		margin-bottom: 10px;
	}
	
	.list-comment img {
		margin-right: 10px;
	}
	
	.list-main img{
		width: 100%;
	}
	
	.list-ul {
		padding-bottom: 51px;
	}
	
	.put_question {
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		background-color: #f7f7f7;
		border-top: 1px solid #dbdbdb;
		padding: 10px 0;
	}
	
	.put_question span {
		border: 1px solid #37B48A;
		color: #37B48A;
		padding: 5px 45px;
		display: inline-block;
	}
</style>